<template>
  <div
    ref="heardItem"
    id="tem1-heard-item"
    class="heard-item"
    :style="{
      position: props.position,
      background: getColor,
    }"
  >
    <div
      :style="{
        backdropFilter: flag ? 'blur(4px)' : '',
      }"
      style="width: 100%; height: 100%"
    >
      <div
        style="
          display: flex;
          justify-content: space-between;
          width: 1180px;
          height: 100%;

          align-items: center;
          margin: auto;
        "
      >
        <div class="img-box hw-flex-style-c-c">
          <img
            style="cursor: pointer"
            @click="setCruuent(0, true)"
            class="t-image--fit-contain t-image--position-center logoImg"
            :src="$filters.getLinkUrl(store.styleInfo.logo, '?imageView2/0/h/64/format/webp')"
            alt=""
            v-if="store.styleInfo.logo"
          />
        </div>

        <div class="gotoNav" style="cursor: pointer" @click="gotoNav">
          <div ref="lineDiv1" class="lineDiv"></div>
          <div ref="lineDiv2" class="lineDiv"></div>
        </div>
      </div>
    </div>
    <div
      class="navBox"
      :style="{
        height: flag ? '630px' : '0',
        background: getColor,
      }"
    >
      <div class="nav">
        <div class="navLeft">
          <div
            ref="changColoRef"
            v-for="(item, index) in tabList"
            :key="index"
            @click="setCruuent(item.id, item.isShow)"
            @mouseenter="changColor(index)"
            @mouseleave="returnColor(index)"
            :style="{ display: item.isShow ? 'block' : 'none' }"
          >
            <!-- <i class="iconfonts" v-if="item.id === 8" >&#xe691;</i> -->
            <img
              style="vertical-align: middle; margin-right: 4px"
              v-if="item.id === 0"
              src="https://static.jiyi.show/template/template1/icon/returnIcon2.png"
              alt=""
            />
            <span style="vertical-align: middle">{{ item.name }}</span>
          </div>
        </div>
        <div class="navRight-box">
          <div class="navRight" ref="navRight">
            <t-collapse expand-mutex :defaultExpandAll="expandFlag">
              <t-collapse-panel v-for="(item, index) in list" :key="item.id" :value="index">
                <!-- <template #expandIcon><StarIcon /></template> -->
                <template #header>
                  <div
                    ref="PanelRef"
                    @click="changeCurrent(index)"
                    class="headerText"
                    @mouseenter="changPanelColor(index)"
                    @mouseleave="returnPanelColor(index)"
                  >
                    {{ item.text }}
                  </div>
                </template>

                <div
                  v-for="(item1, index1) in item.children"
                  :key="item1.id"
                  class="item1Text"
                  :id="'item1TextRef' + item1.id"
                  ref="item1TextRef"
                  @click="pathChilds(item.id, item, index1, true)"
                  @mouseenter="level2ChangColor(item1.id)"
                  @mouseleave="level2ReTurnColor(item1.id)"
                >
                  <span v-if="item.children.length">{{ item1.text }}</span>
                </div>
                <div
                  ref="enterUnitRef"
                  @mouseenter="enterUnit(index)"
                  @mouseleave="leaveUnit(index)"
                  class="item1Text"
                  v-show="item.children.length === 0"
                  @click="pathChilds(item.id, item)"
                >
                  进入单元 <i class="doorIcon">&#xe66d;</i>
                </div>
              </t-collapse-panel>
            </t-collapse>
          </div>
        </div>
        <div class="arrowLeftBox" :style="{ display: flag ? 'block' : 'none' }">
          <div
            class="arrowLeft"
            @click="addCurrent(-1)"
            :style="{
              opacity: current == 0 ? '0.3' : '1',
            }"
          >
            <arrowLeft></arrowLeft>
          </div>
          <div
            class="arrowLeft"
            @click="addCurrent(1)"
            :style="{
              opacity: lockShow ? '0.3' : '1',
            }"
          >
            <arrowRightVue></arrowRightVue>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { pathList, pathListLoop } from '../route';
import { nextTick, onMounted, ref, watch, computed } from 'vue';
import { urls } from '@/utils/request/upload';
import { storeToRefs } from 'pinia';
import { useProjectStore } from '@/store';

import { useRoute, useRouter } from 'vue-router';
import { settings } from '@/api/project/project';
import arrowLeft from '../publicComponents/components/arrowLeft.vue';
import arrowRightVue from '../publicComponents/components/arrowRight.vue';
const router = useRouter();
const route = useRoute();
const modelId = ref(0);
const current = ref(0);
const currentNum = ref(0);
const heightNum = ref(0);
const lineDiv1 = ref(null);
const lineDiv2 = ref(null);
const heardItem = ref(null);
const flag = ref(false);
const expandFlag = ref(false); //是否展开面板
const navRight = ref(null);
const PanelRef = ref(null);
const item1TextRef = ref(null);
const enterUnitRef = ref(null);
const lockShow = ref(false);
const store = useProjectStore();
const { tabvalue, childModel, styleInfo } = storeToRefs(store);
console.log(styleInfo.logo);

const projectId = Number(localStorage.getItem('projectId'));
const list = ref([
  {
    id: 0,
    text: '首页',
    children: [],
  },
]);
const getColor = computed(() => {
  if (route.meta.title === '模板首页') {
    if (flag.value) {
      return 'rgba(0, 0, 0, 0.8)';
    } else {
      return 'rgba(0, 0, 0, 0.2)';
    }
  } else if (route.meta.title === '子单元') {
    if (
      (store.childModel.value && store.childModel.children.length > 0) ||
      (store.childModel.showpieceTotal > 0 && store.childModel.value)
    ) {
      if (flag.value) {
        return 'rgba(0, 0, 0, 0.8)';
      } else {
        return 'rgba(0, 0, 0, 0.2)';
      }
    } else {
      if (flag.value) {
        return 'rgba(0, 0, 0, 0.8)';
      } else {
        return store.styleInfo.themeColor;
      }
    }
  } else {
    if (flag.value) {
      return 'rgba(0, 0, 0, 0.8)';
    } else {
      return store.styleInfo.themeColor;
    }
  }
});
const changColoRef = ref(null);
// const tabList = ref([
//   { name: '首页', isShow: true, id: 8 },
//   { name: '展品图库', isShow: true, id: 1 },
//   { name: '文创商品', isShow: true, id: 4 },
//   { name: '版权声明', isShow: true, id: 5 },
//   { name: '学术研究', isShow: true, id: 3 },
//   { name: '留言板', isShow: true, id: 2 },
// ]);
const tabList = ref([
  { name: '首页', isShow: true, id: 0 },
  { name: '展品图库', isShow: true, id: 1 },
  { name: '文创商品', isShow: true, id: 4 },
  { name: '版权声明', isShow: true, id: 5 },
  { name: '学术研究', isShow: true, id: 3 },
  { name: '留言板', isShow: true, id: 2 },
]);
const mouseover = (e: number) => {
  modelId.value = e;
};
const props = defineProps({
  // background: {
  //   type: String,
  //   // default: 'rgba(0, 0, 0, 0.4)',
  // },
  position: {
    type: String,
    default: 'relative',
  },
  color: {
    type: String,
    default: '#ffffff',
  },
  flag: Boolean,
});
const routeFlag = ref(false);
list.value = list.value.concat(store.styleInfo.moduleList).slice(1);
// //console.log(list.value);

const emit = defineEmits(['pathChild', 'changeFlag']);
const pathChilds = (e: number, item: any, index: number, isChild: Boolean) => {
  //console.log('item', item);

  emit('pathChild', e);
  if (e === 0) {
    // router.push({
    //   path: route.meta.loopType ? pathListLoop[0] : pathList[0],
    //   query: { projectId: localStorage.getItem('projectId'), current: index, childId: item.id },
    // });
    router.push({
      name: route.meta.loopType ? pathListLoop[0] : pathList[0],
      query: { childId: item.id },
    });
  } else {
    // //console.log('else');

    store.setchildModel(item);
    store.setCurrent(index);
    // router.push({
    //   path: route.meta.loopType ? pathListLoop[8] : pathList[8],
    //   query: { projectId: localStorage.getItem('projectId'), current: index, childId: item.id },
    // });
    router.push({
      name: route.meta.loopType ? pathListLoop[8] : pathList[8],
      query: { childId: item.id },
    });
  }
  flag.value = false;
  // setTimeout(() => {
  //   if (
  //     (!item.value && item.children.length > 0 && routeFlag.value) ||
  //     (!item.value && item.showpieceTotal > 0 && routeFlag.value)
  //   ) {
  //     heardItem.value.style.background = store.styleInfo.themeColor;
  //   } else {
  //     heardItem.value.style.background = 'rgba(0, 0, 0, 0.4)';
  //   }
  // }, 500);
  lineDiv1.value.style.transform = 'rotate(0deg)';
  lineDiv1.value.style.marginBottom = '10px';
  lineDiv2.value.style.transform = 'rotate(-0deg)';
  // //console.log('99999', index);
  if (isChild) {
    // //console.log('99999', index);
    setTimeout(() => {
      var dom = document.getElementById('exhibits-right-box');
      //console.log(dom);

      dom.scrollIntoView({ block: 'start', behavior: 'smooth' });
    }, 300);
  }
};
const addCurrent = (num: number) => {
  // //console.log(current.value, num);

  expandFlag.value = false;

  const height = navRight.value.offsetHeight - 480;
  heightNum.value = height;
  //console.log(currentNum.value, heightNum.value);

  if (current.value === 0 && num < 0) {
    current.value = 0;
    return;
  } else if (heightNum.value <= Math.abs(currentNum.value) && num > 0) {
    // //console.log('ssss');
    lockShow.value = true;
    return;
  } else {
    lockShow.value = false;
    current.value += num;
    currentNum.value += -80 * num;
    // currentNum.value = currentNum.value - height;
    navRight.value.style.transform = `translateY(${currentNum.value}px)`;
  }
};
const changeCurrent = (num: number) => {
  // current.value = num;
  setTimeout(() => {
    nextTick(() => {
      const height = navRight.value.offsetHeight - 480;
      heightNum.value = height;

      if (heightNum.value <= Math.abs(currentNum.value)) {
        lockShow.value = true;
      } else {
        if (heightNum.value >= Math.abs(currentNum.value) && Math.abs(currentNum.value) - heightNum.value > 200) {
          //console.log(currentNum.value, heightNum.value);
          currentNum.value = currentNum.value + (Math.abs(currentNum.value) - heightNum.value);
          navRight.value.style.transform = `translateY(${currentNum.value}px)`;
        }
        lockShow.value = false;
      }
    });
    // heardItem.value.style.background = 'rgba(0, 0, 0, 0.4)';
  }, 500);
};
const gotoNav = () => {
  // //console.log('点击了');

  flag.value = !flag.value;
  //console.log(flag.value);

  if (flag.value) {
    // heardItem.value.style.background = 'rgba(0, 0, 0, 0.8)';
    lineDiv1.value.style.transform = 'rotate(30deg)';
    lineDiv1.value.style.marginBottom = '0';
    lineDiv2.value.style.transform = 'rotate(-30deg)';
  } else {
    // setTimeout(() => {
    //   if (routeFlag.value) {
    //     heardItem.value.style.background = store.styleInfo.themeColor;
    //   } else {
    //     heardItem.value.style.background = 'rgba(0, 0, 0, 0.4)';
    //   }
    // }, 500);
    lineDiv1.value.style.transform = 'rotate(0deg)';
    lineDiv1.value.style.marginBottom = '10px';
    lineDiv2.value.style.transform = 'rotate(-0deg)';
  }
};
const setCruuent = (e: number, isShow: Boolean) => {
  // //console.log('e', e);
  if (!isShow) {
    return;
  }
  switch (e) {
    case 0:
      router.push({
        name: route.meta.loopType ? pathListLoop[0] : pathList[0],
        // query: { projectId: localStorage.getItem('projectId') },
      });
      break;
    case 1:
      router.push({
        name: route.meta.loopType ? pathListLoop[1] : pathList[1],
        // query: { projectId: localStorage.getItem('projectId') },
      });
      break;
    case 2:
      router.push({
        name: route.meta.loopType ? pathListLoop[7] : pathList[7],
        // query: { projectId: localStorage.getItem('projectId') },
      });
      break;
    case 3:
      router.push({
        name: route.meta.loopType ? pathListLoop[3] : pathList[3],
        // query: { projectId: localStorage.getItem('projectId') },
      });
      break;
    case 5:
      router.push({
        name: route.meta.loopType ? pathListLoop[6] : pathList[6],
        // query: { projectId: localStorage.getItem('projectId') },
      });
      break;
    default:
      router.push({
        name: route.meta.loopType ? pathListLoop[5] : pathList[5],
        // query: { projectId: localStorage.getItem('projectId') },
      });
      break;
  }
  flag.value = false;
  setTimeout(() => {
    //console.log(routeFlag.value);

    if (routeFlag.value) {
      // heardItem.value.style.background = store.styleInfo.themeColor;
    } else {
      // heardItem.value.style.background = 'rgba(0, 0, 0, 0.4)';
    }
  }, 500);
  lineDiv1.value.style.transform = 'rotate(0deg)';
  lineDiv1.value.style.marginBottom = '10px';
  lineDiv2.value.style.transform = 'rotate(-0deg)';
};
const changColor = (index: number) => {
  // changColoRef.value[index].style.color = store.styleInfo.auxiliaryColor;
  if (store.styleInfo.colorType === 4 || store.styleInfo.colorType === 5) {
    changColoRef.value[index].style.color = store.styleInfo.auxiliaryColor;
  } else {
    changColoRef.value[index].style.color = store.styleInfo.shmentColor;
  }
};
//二级单元划过颜色
const level2ChangColor = (id: number) => {
  // item1TextRef.value[index].style.color = store.styleInfo.auxiliaryColor;
  var dom = document.getElementById('item1TextRef' + id);
  //console.log(dom);

  if (store.styleInfo.colorType === 4 || store.styleInfo.colorType === 5) {
    dom.style.color = store.styleInfo.auxiliaryColor;
  } else {
    dom.style.color = store.styleInfo.shmentColor;
  }
};
const enterUnit = (index: number) => {
  //console.log(index, enterUnitRef.value[index]);

  if (store.styleInfo.colorType === 4 || store.styleInfo.colorType === 5) {
    enterUnitRef.value[index].style.color = store.styleInfo.auxiliaryColor;
  } else {
    enterUnitRef.value[index].style.color = store.styleInfo.shmentColor;
  }
};
//二级单元划走颜色
const level2ReTurnColor = (id: number) => {
  var dom = document.getElementById('item1TextRef' + id);
  dom.style.color = '#ffffff';
};
const leaveUnit = (index: number) => {
  enterUnitRef.value[index].style.color = '#ffffff';
};
const returnColor = (index: number) => {
  changColoRef.value[index].style.color = '#ffffff';
};
const changPanelColor = (index: number) => {
  // PanelRef.value[index].style.color = store.styleInfo.auxiliaryColor;
  if (store.styleInfo.colorType === 4 || store.styleInfo.colorType === 5) {
    PanelRef.value[index].style.color = store.styleInfo.auxiliaryColor;
  } else {
    PanelRef.value[index].style.color = store.styleInfo.shmentColor;
  }
};
const returnPanelColor = (index: number) => {
  PanelRef.value[index].style.color = '#ffffff';
};
const initSetting = async () => {
  try {
    tabList.value = [
      { name: '首页', isShow: true, id: 0 },
      { name: '展品图库', isShow: true, id: 1 },
      { name: '文创商品', isShow: true, id: 4 },
      { name: '版权声明', isShow: true, id: 5 },
      { name: '学术研究', isShow: true, id: 3 },
      { name: '留言板', isShow: true, id: 2 },
    ];
    let res = await settings(localStorage.getItem('projectId'), 3);
    res.data.forEach((element) => {
      if (!element.config) {
        // //console.log('element.type', element.type);

        switch (element.type) {
          case 2:
            tabList.value[5].isShow = false;
            break;
          case 3:
            tabList.value[4].isShow = false;
            break;
          case 4:
            tabList.value[2].isShow = false;
            break;
          case 5:
            tabList.value[3].isShow = false;
            break;
        }
      }
    });
    // //console.log('tabList', res.data);
  } catch {}
};
initSetting();
watch(
  () => props.flag,
  () => {
    if (props.flag) {
      flag.value = false;
      emit('changeFlag', false);
      setTimeout(() => {
        changeCurrent();
        // heardItem.value.style.background = 'rgba(0, 0, 0, 0.4)';
      }, 500);
      lineDiv1.value.style.transform = 'rotate(0deg)';
      lineDiv1.value.style.marginBottom = '10px';
      lineDiv2.value.style.transform = 'rotate(-0deg)';
    }
  },
  { deep: true },
);
watch(
  () => route.query.childId,
  (value) => {
    // const foundElement = styleInfo.value.moduleList.find((item) => item.id === childModel.value.id);
    // store.setchildModel(foundElement);
    if (route.query.childId) {
      const foundElement = styleInfo.value.moduleList.find((item) => item.id === Number(route.query.childId));
      // //console.log(foundElement, 'foundElement--------');

      store.setchildModel(foundElement);
    } else {
      // const foundElement = styleInfo.value.moduleList.find((item) => item.id === childModel.value.id);
      // store.setchildModel(foundElement);
    }
  },
  { immediate: true, deep: true },
);
watch(
  () => route.name,
  () => {
    if (
      route.name === 'templateExhibits' ||
      route.name === 'templateExhibitsLoop' ||
      route.name === 'templateExhibitsInfo' ||
      route.name === 'templateExhibitsInfoLoop' ||
      route.name === 'templateCopyright' ||
      route.name === 'templateCopyrightLoop' ||
      route.name === 'templateCommodity' ||
      route.name === 'templateCommodityLoop'
    ) {
      //console.log('进入' + route.name);
      routeFlag.value = true;
      // heardItem.value.style.backgroundColor = store.styleInfo.themeColor;
    } else {
      // heardItem.value.style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
      routeFlag.value = false;
    }
  },
  { deep: true, immediate: true },
);
</script>

<style lang="less" scoped>
.t-col {
  margin: 0;
  height: 34px;
}
.t-row {
  padding: 11px;
  // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.img-box {
  width: 100%;
  height: 100%;
  justify-content: left;

  img {
    // width: 128px;
    max-width: 260px;
    height: 64px;
    // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  }
}
.item-title {
  font-size: 18px;
  // font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
  font-weight: 500;
  color: #ffffff;
  line-height: 20px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  margin-left: 27px;
  line-height: 21px;
}
.item-title:hover {
  // font-size: 14px;
  // font-weight: bold;
  // color: #ffffff;
  // line-height: 21px;
  // text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.item-active {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  line-height: 21px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.hw-box-style-flex {
  height: 100%;
  justify-content: flex-end;
}
.heard-item {
  display: flex;
  align-items: center;
  width: 100%;
  top: 0;
  left: 0;
  height: 80px;
  min-width: 1180px;
  z-index: 247;
  transition: all 0.5s;
  // background: rgba(0, 0, 0, 0.4);
}
.t-row {
  margin-top: 0;
  padding-left: 130px;
  padding-right: 130px;
}
.pop-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 4px;
}
.pop-item {
  display: flex;
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  opacity: 0.8;
}
.pop-item:hover {
  opacity: 1;
}
.gotoNav {
  height: 12px;
  display: flex;
  flex-direction: column;
}
.lineDiv {
  width: 32px;
  height: 1px;
  background-color: #ffffff;
  border-radius: 1px;
  transition: all 0.5s;
}
.lineDiv:first-child {
  margin-bottom: 10px;
}

.navBox {
  width: 100%;
  height: 630px;
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 80px;
  transition: all 0.5s;
  backdrop-filter: blur(4px);
}
.nav {
  height: 100%;
  width: 1180px;
  margin: auto;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: hidden;
  // position: relative;
  // padding-bottom: 100px;
  .navLeft {
    // width: 64px;
    height: 480px;
    font-size: 16px;
    // font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
    font-weight: 500;
    color: #ffffff;
    line-height: 24px;
    margin-right: 130px;
    // padding-top: 93px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    > div {
      padding: 25px 0;
      cursor: pointer;
    }
    // > div:hover {
    //   color: #d2ad77;
    // }
  }
  .navRight-box {
    flex: 1;
    height: 480px;
    overflow: auto;
  }
  .navRight {
    transition: all 0.5s;
    // padding-top: 50px;

    // overflow-y: auto;
  }
}
::-webkit-scrollbar {
  width: 0;
}
/deep/.t-collapse {
  color: #fff;
}
/deep/.t-collapse-panel__wrapper .t-collapse-panel__content {
  color: #fff;
}
.headerText {
  width: 100%;
  height: 80px;
  line-height: 80px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  // font-family: SourceHanSerifCN-Bold, SourceHanSerifCN;
  font-weight: bold;
}
// .headerText:hover {
//   color: #d2ad77;
// }
.item1Text {
  padding: 16px 0;
  transition: all 0.3s;
  cursor: pointer;
  // font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
}
.item1Text:hover {
  // color: #d2ad77;
  padding-left: 12px;
}
.arrowLeftBox {
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  left: calc(50% + 620px);
}
.arrowLeft {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #ffffff;
  border-radius: 50%;
  transform: rotate(90deg);
  padding-left: 1px;
  margin-bottom: 16px;
  cursor: pointer;
  :deep(.iconfonts) {
    color: #fff !important;
    font-size: 22px !important;
    // position: absolute;
    // left: 50%;
  }
}
/deep/.t-collapse-panel__header {
  padding: 0;
}
/deep/.t-collapse-panel__icon {
  display: none;
}
.doorIcon {
  display: inline-block;
  width: 16px;
  font-size: 16px;

  transform: rotate(-90deg) !important;
}
.logoImg {
  max-width: 260px;
}
</style>
